<template>
    <el-row class="min-h-screen bg-rose-100">
        <el-col :lg="12" :md="12" class="flex items-center justify-center flex-col space-y-15">
            <h2 class="font-bold text-4xl text-gray-600 ml-16">口 语 例 句</h2>
            <el-form ref="formRef" 
            :rules="rules"
            :model="form" 
            class="w-[550px]">
                <el-form-item prop="chinese" label="中文语句">
                    <el-input v-model="form.chinese" />
                </el-form-item>
                <div>
                    <el-form-item label="英文语句" prop="english">
                        <el-input v-model="form.english" type="textarea" />
                    </el-form-item>
                </div>
                <el-form-item>
                    <el-button type="primary" round class="w-[550px] ml-20" @click="submitOral">保存</el-button>
                </el-form-item>
            </el-form>
        </el-col>
        <el-col :lg="12" :md="12" class="bg-orange-100 flex items-center justify-center flex-col space-y-15">
            <h2 class="font-bold text-4xl text-gray-600 ml-16">单 词</h2>
            <el-form ref="wordForm" 
            :rules="rules"
            :model="form" 
            class="w-[550px]">
                <el-form-item prop="word" label="英语单词">
                    <el-input v-model="form.word" />
                </el-form-item>
                <div>
                    <el-form-item label="中文释义" prop="mean">
                        <el-input v-model="form.mean" type="textarea" />
                    </el-form-item>
                </div>
                <el-form-item>
                    <el-button type="primary" round class="w-[550px] ml-20" @click="submitWord">保存</el-button>
                </el-form-item>
            </el-form>
        </el-col>
    </el-row>

</template>

<script lang="ts" setup>
import { saveWord, saveOral } from "~/api/manager.js"
import { reactive, ref } from 'vue'
import { ElNotification } from 'element-plus'

const formRef = ref(null);
const wordForm = ref(null);

const form = reactive({
    chinese: '',
    english: '',
    word: '',
    mean: '',
})

const rules = {
    chinese: [
        {
            required: true,
            message: '中文不能为空',
            trigger: 'blur'
        }
    ],
    english: [
        {
            required: true,
            message: '英文不能为空',
            trigger: 'blur'
        }
    ],
    word: [
        {
            required: true,
            message: '单词不能为空',
            trigger: 'blur'
        }
    ],
    mean: [
        {
            required: true,
            message: '中文释义不能为空',
            trigger: 'blur'
        }
    ]
}

const submitOral = () => {
    formRef.value.validate((valid) =>{
        if (valid) {
            saveOral(form.chinese, form.english)
                .then(res =>{
                    saveSuc()
                })
                .catch(res=>{
                    saveError()
                })

            form.chinese = "";
            form.english = "";
        }
    })
}

const submitWord = () => {
    wordForm.value.validate((valid) =>{
        if (valid) {
            saveWord(form.word, form.mean)
                .then(res =>{
                    saveSuc()
                })
                .catch(res=>{
                    saveError()
                })

            form.word = "";
            form.mean = "";
        }
    })
}

const saveSuc = () => {
    ElNotification({
        message: '保存成功',
        type: 'success',
        duration: 1000
    })
}

const saveError = () => {
    ElNotification({
        message: '保存失败',
        type: 'error',
        duration: 1000
    })
}
</script>